<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      size="small"
    >
      <el-form-item label="选手" prop="playerName">
        <el-select
          v-model="queryParams.playerName"
          placeholder="请选择选手"
          clearable
          size="small"
        >
          <el-option
            v-for="option in playerOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投票类型" prop="voteType">
        <el-select
          v-model="queryParams.voteType"
          placeholder="请选择投票类型"
          clearable
          size="small"
        >
          <el-option label="点赞" value="like"></el-option>
          <el-option label="倒赞" value="dislike"></el-option>
          <el-option label="评论" value="comment"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column
        prop="id"
        label="ID"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="playerName"
        label="选手"
        width="120"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="voteUser"
        label="投票用户"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="userRole"
        label="用户角色"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.userRole === "player" ? "选手" : "评委" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="voteType"
        label="投票类型"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.voteType === 'like'" type="success"
            >点赞</el-tag
          >
          <el-tag v-if="scope.row.voteType === 'dislike'" type="danger"
            >倒赞</el-tag
          >
          <el-tag v-if="scope.row.voteType === 'comment'" type="info"
            >评论</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listPlayer } from "@/api/player";
import { parseTime } from "@/utils/ruoyi";
import { listPlayerIntroduceComment } from "@/api/player";

export default {
  name: "PlayerVoteData",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        playerName: undefined,
        voteType: undefined,
      },
      // 选手选项
      playerOptions: [],
    };
  },
  created() {
    this.getPlayerOptions();
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      listPlayerIntroduceComment(this.queryParams)
        .then((response) => {
          this.tableData = response.rows;
          this.total = response.total;
        })
        .catch((error) => {
          this.$message.error("获取数据失败");
          console.error(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 获取选手下拉列表 */
    getPlayerOptions() {
      listPlayer().then((response) => {
        this.playerOptions = response.rows.map((item) => ({
          label: item.name,
          value: item.id,
        }));
      });
    },
    /** 时间格式化 */
    parseTime,
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
